[heroku]サーバを立てて、TwiMLを返してみる#4

TwiMLを返すサーバ

第２回ではTwilioに音声を再生させるためにTwimletsを使用してTwiMLを生成していました。
（makeCall関数のurlにhttp://twimlets.com/echo?Twiml=[生成させたいTwiML]を指定）
Twimletsとは、基本的な音声機能を実装しているWebアプリケーションです。
URLパラメータでTwiMLを指定すれば、XMLにして生成してくれます。

テストや単純なものであればTwimletsでいいのですが、複雑なTwiMLを返したい場合や、いろいろな処理も同時に行いたい場合、
TwiMLを生成するサーバを自分で用意し、makeCall関数のurlにはそのサーバのURLを指定するようにします。
今回はTwiMLを生成するサーバを作成し、携帯番号を入力するとそこにコールしてメッセージを再生するサンプルアプリケーションを作成してみましょう。
なお、サーバはTwilioサーバからアクセスできる必要があるので、Heroku上にデプロイします。
※外部(Twilioサーバ)からアクセスできる場所であれば、EC2でも自サバでもかまいません

環境構築方法

実行環境およびTwilioアカウントについては、第１回記事と第２回記事を見て設定＆確認しておいてください。
また、アプリケーションのデプロイをHeroku上に行いますので、Gerokuが使える環境にしておきましょう。
このへんをみたり、Web上で探せばたくさん出てくるので、それらを参考にしておきましょう。

Twimlを返すサーバをHerokuへデプロイして動かす

1.Herokuにログイン&アプリを作成

Heroku Toolbeltを使用し、コンソールからログインしてアプリケーションを作成しましょう。
heroku createで作成が成功すると、ドメインとGitパスが生成されます。

% heroku login //herokuのIDパスワードを入力
% heroku create twilioSample //名前は適宜置き換えてください                                                 
Creating twilioSample... done, stack is cedar
http://twilioSample.herokuapp.com/ | [email protected]:twilioSample.git

2.expressアプリを作成

herokuへデプロイするnodeアプリを作成します。
このアプリは携帯番号をフォームで受け取り、その番号宛てにTwilioからコールします。
コール時の内容は、同じアプリからTwimlResponseオブジェクトを返すことでTwiMLを生成させます。
では、nodeアプリを作成しましょう。

% npm install -g express
% express twiSample
% cd twiSample
% npm install --save
% npm install twilio --save

app.jsでは下記のように、２つのurlを追加してください。
/twimlはTwilioからリクエストをうけた際に、発信通話時に再生する音声を返します。
/submitは入力された携帯番号への発信通話をTwilioに依頼します。

・
・
app.get('/', routes.index);
app.post('/twiml', routes.twiml);
app.post('/submit', routes.submit);
・
・

なお、TwilioからのリクエストはPOSTでくるので、TwiML生成URLはPOSTで受け取るようにしてください。

index.jadeでは携帯番号入力用フォームを記述します。

extends layout

block content
  h1= title
  form#form(action='/submit',method='POST')
    p input phoneNumber：
    input#phoneNumber(type='text',name='phoneNumber')
    input(type='submit', value='click')

submit.jadeを新たに作成します。携帯番号を入力してサブミット後に遷移する画面です。

extends layout

block content
  h1= title
  Submit PhoneNumber!

index.jsで、/twimlリクエスト時と/submitリクエスト時の動作を記述します。
Twilioからのリクエストを受けた際(/twiml)は、TwimlResponseオブジェクトをtext/xml形式で返せばOKです。

var twilio = require('twilio');
var accountSid = '＜ACCOUTN_ID＞';
var authToken = '＜AUTH_TOKEN＞';
var client = twilio(accountSid, authToken);

//Twilioからリクエストがきた際にTwiMLを生成する
exports.twiml = function(req, res){
    var resp = new twilio.TwimlResponse();
    resp.say('from Heroku Server!');
    res.writeHead(200, {'Content-Type': 'text/xml'});
    console.log(resp);
    res.end(resp.toString());
};

//Twilioから入力した携帯番号に対して発信させる
exports.submit = function(req, res){
    var phoneNumber = req.body.phoneNumber;
    console.log("to phoneNumber = " + phoneNumber);
    client.makeCall({
        to: phoneNumber, //コール先のtwilio番号
        from: '＜取得したTwilio番号＞', // 取得したtwilioの番号.
        url: 'http://twilioSample.herokuapp.com/twiml'//twimlを返すURL.create時に生成されたドメインを指定
    }, function (err, responseData) {
        if(err) throw err;
        console.log(responseData);
    });
    res.render('submit', { title: 'auth phone number' });
};

Herokuでnodeアプリを起動させるため、アプリケーションディレクトリ直下にProcfileを作成しましょう。

web: node app.js

3.Herokuへデプロイ

作成したアプリケーションで必要な作業を行い、アップロードしましょう。
node_modulesをアップロードする必要はないので、.gitignoreを作成します。

node_modules

package.jsonにenginesを追記しましょう。
自分の環境のnodeとnpmのバージョンを記述すればOKです。

・
・
  "dependencies": {
    "express": "~3.2.0",
    "jade": "~0.29.0",
    "twilio": "~1.1.0"
  },
  "engines": {
    "node": "0.10.4",
    "npm": "1.2.18"
  }
}

では、gitでコミットを行い、Herokuへpushしましょう。

% git init
% git add .
% git commit -m "commit!
% git remote add heroku <create時に表示されたgitリポジトリ>
% git push heroku master

アプリケーションの起動が成功したら、heroku create時に表示されたドメインにアクセスしてみてください。
そこで携帯番号(+81からはじまるように)を入力すれば、そこに対してTwilioから発信通話がきます。
内容は、/twimlで返される内容の音声になっています。

まとめ

今回は自分でTwiMLを返すサーバをHerokuでたてて、動作を確認してみました。
次回はIVR(自動音声応答システム)あたりを確認してみる予定です。

参考サイトなど

• 公式: http://kddi-web.twilio.jp/
• Github: http://twilio.github.io/twilio-node/
• Twikio Labs: https://www.twilio.com/labs